<template>
  <div id="echartContainer5"></div>
</template>

<script>

  export default {
    name: 'salaryByWorkYear',
    props: {
      salaryByWorkYear: {
        default: function () {
          return [0, 0, 0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '工作年限和薪资分析',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 0, 10]
            },
          },
          grid: {
            top: 45,
            bottom: 25,
            left: 60,
            right: 10
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'category',
            data: ['不限', '应届毕业生', '3年以下', '3-5年', '5-10年', '10年以上']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 1,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#57616C'],
                width: 1,
                type: 'solid'
              }
            },
          },
          color: ["#7BE3FA", "#3B8E9C"],
          series: [{
            data: [6000, 6200, 10000, 15000, 20000, 30000],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#2599A0' // 0% 处的颜色
                }, {
                  offset: 1, color: '#030409' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }],
          animationEasingUpdate: function (k) {
            if ((k *= 2) < 1) {
              return 0.5 * k * k * k * k;
            }
            return -0.5 * ((k -= 2) * k * k * k - 2);
          },
        }

      };
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer5'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);

        //             myChart.hideLoading();

      }
    },
    watch: {
      salaryByWorkYear: function () {

        //浏览器刷新页面后watch不生效


        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer5'));
        if (!this.salaryByWorkYear) {
          return false
        }
        console.info("SalaryByWorkYear Changed");
        myChart.setOption({
          series: [{data: this.salaryByWorkYear}]
        });
      }


    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer5 {
    width: 100%;
    height: 100%;
  }
</style>
